<template>
    <div class="login-container">
        <el-row justify="center" align="middle" style="height: 100%">
            <el-col :span="12" :xs="20">
                <el-card class="login-card">
                    <el-row>
                        <el-col :span="10" :xs="0" class="logo-container">
                            <img src="../../assets/images/logo.png" alt="" />
                            <h1>源创模板</h1>
                        </el-col>
                        <el-col :span="2" :xs="0" class="logo-container">
                            <div class="line"></div>
                        </el-col>
                        <el-col
                            class="login-form"
                            :span="12"
                            :xs="{ span: 24 }"
                        >
                            <h1>用户登陆</h1>
                            <el-form
                                :rules="rules"
                                ref="loginFormRef"
                                :model="loginUser"
                                status-icon
                            >
                                <el-form-item label="账号" prop="username">
                                    <el-input
                                        v-model="loginUser.username"
                                        :prefix-icon="User"
                                        placeholder="请输入账号"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="password">
                                    <el-input
                                        v-model="loginUser.password"
                                        :prefix-icon="Lock"
                                        type="password"
                                        placeholder="请输入密码"
                                        show-password
                                    ></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button
                                        :loading="loading"
                                        @click="login(loginFormRef)"
                                        class="login-button"
                                        type="primary"
                                        size="default"
                                    >
                                        登录
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { Lock, User } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import type { LoginUser } from '@/api/authority/user/type'
import { ElNotification, FormInstance, FormRules } from 'element-plus'
import useUserStore from '@/store/modules/user.ts'
import { useRoute, useRouter } from 'vue-router'
import getTime from '@/utils/time'
// 路由
let $router = useRouter()
let $route = useRoute()
// 用户仓库
let userStore = useUserStore()
// loading
let loading = ref(false)
// 登录表单
let loginFormRef = ref<FormInstance>()
// 收集登录用户信息
let loginUser = reactive<LoginUser>({
    username: 'admin',
    password: '123456',
})
// 表单校验规则
const rules = reactive<FormRules<LoginUser>>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 4, message: '用户名不小于四位数', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 4, message: '密码不小于四位数', trigger: 'blur' },
    ],
})
// 登录按钮回调
const login = async (formEl: FormInstance | undefined) => {
    loading.value = true
    if (!formEl) return
    await formEl.validate((valid) => {
        if (valid) {
            userStore
                .userLogin(loginUser)
                .then(() => {
                    const query = $route.query.redirect
                    loading.value = false
                    $router.replace((query as string) || '/')
                    ElNotification({
                        type: 'success',
                        message: '欢迎回来',
                        title: `Hi! ${getTime()}好`,
                    })
                })
                .catch((error) => {
                    loading.value = false
                    ElNotification({
                        type: 'error',
                        message: error as string,
                    })
                })
        } else {
            loading.value = false
        }
    })
}
</script>

<style lang="less" scoped>
.login-container {
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #add8e6, #87ceeb);

    .login-card {
        .logo-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            h1 {
                margin-top: 10px;
                font-size: 20px;
                font-weight: 800;
            }
        }

        .line {
            height: 100%;
            width: 1px;
            background-color: #e2e2e2;
        }

        img {
            width: 50%;
        }

        .login-form {
            padding: 20px 40px;

            h1 {
                text-align: center;
                margin-bottom: 20px;
                font-size: 20px;
            }

            .login-button {
                margin-top: 10px;
                width: 100%;
            }
        }
    }
}
</style>
